<template>
  <div style="padding: 50px; width: 600px">
    <div style="height: 1000px">height:1000px</div>
    <div
      id="target"
      style="height: 300px; text-align: center; border: 3px solid #ccc"
    >
      目标
    </div>
    <div style="height: 1000px">height:1000px</div>
  </div>
</template>
<script>
import { useIntersectionObserver } from '@vueuse/core'
export default {
  mounted () {
    const target = document.querySelector('#target')
    const { stop } = useIntersectionObserver(
      target,
      ([{ isIntersecting }], observerElement) => {
        console.log(target, isIntersecting)
        if (isIntersecting) {
          stop()
        }
      },
      // threshold 表示观察的目标进入视口的比例，取值范围是从 0 到 1
      //           默认是0.1。 值越大表示观察越不灵敏
      { threshold: 0 }
    )
  }
}
</script>
